<template>
  <div class="iko">
    <!-- 顶部 -->
    <div class="top">
      <div class="top1">
        <div class="uji">
          <div class="tupian">
            <img
              src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"
            />
          </div>
          <div class="inout">
            <div class="yts">
              <div>
                <svg
                  t="1647006094952"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2198"
                  width="20"
                  height="20"
                >
                  <path
                    d="M490.666667 810.666667C315.733333 810.666667 170.666667 665.6 170.666667 490.666667S315.733333 170.666667 490.666667 170.666667 810.666667 315.733333 810.666667 490.666667 665.6 810.666667 490.666667 810.666667z m0-42.666667c153.6 0 277.333333-123.733333 277.333333-277.333333S644.266667 213.333333 490.666667 213.333333 213.333333 337.066667 213.333333 490.666667 337.066667 768 490.666667 768z m264.533333-42.666667l119.466667 119.466667-29.866667 29.866667-119.466667-119.466667 29.866667-29.866667z"
                    fill="#444444"
                    p-id="2199"
                  ></path>
                </svg>
              </div>
              <input type="text" class="inp" />
            </div>
          </div>
          <ul class="shoute">
            <li>首页</li>
            <li>新手入门</li>
            <li>API</li>
            <li>关于</li>
            <li>注册</li>
            <li>登录</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 下面的路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Quan",
};
</script>

<style>
* {
  padding: 0px;
  margin: 0px;
}
/* 下面的路由 */
.iok {
  padding: 10px;
  height: 30.19px;
  background: #ffffff;
  clear: both;
}
.img1 {
  width: 30px;
  height: 30px;
  float: left;
}
.ziti {
  font-size: 0.16rem;
  margin-top: -13px;
}
.put_top {
  float: left;
  padding: 2px 4px;
  font-size: 12px;
  background: #80bd01;
  color: white;
  margin-left: 10px;
  margin-top: 3px;
}
.sitian {
  line-height: 28px;
  margin-top: 11px;
  text-align: center;
  float: right;
  font-size: 12px;
}
.zhengtu {
  width: 88%;
  height: 30px;
  background: #ffffff;
}
.zhiding {
  width: 74%;
  float: left;
  margin-left: 10px;
  line-height: 28px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 切换 */
.qianh {
  width: 100%;
  clear: both;
}
.qianh1 {
  margin: 0 5px;
  z-index: 999;
  width: auto !important;
  background: #f6f6f6;
}
.qianh2 {
  height: 20px;
  padding: 10px;
}
.qianh2 > ul > li {
  float: left;
  list-style: none;
  padding: 3px 4px;
  /* background: white; */
  margin: 0px 2.1%;
}
.qianh4 {
  background: #80bd01;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.qianh5 {
  color: white !important;
}
.qianh2 > ul > li > a {
  float: left;
  text-decoration: none;
  color: #80bd01;
  font-size: 14px;
}
/* 顶部 */
.top {
  width: 100%;
  /* height: 156px; */
  background: #e1e1e1;
}
.top1 {
  margin: 0 5px;
  z-index: 999;
  clear: both;
  width: auto !important;
  background: #444444;
}
.shoute{
  width: 100%;
  height: auto;
  display: inline-block;
  background: #444444;
}
.shoute > li {
  float: left;
  padding: 10px 15px;
  font-size: 13px;
  color: #cccccc;
  list-style: none;
}
.uji {
  width: 93.9%;
  /* height: 156px; */
  background: #444444;
  margin: 0px auto;
}
.tupian {
  width: 160px;
  height: 40px;
  margin: 0px 91px;
  padding: 3px 20px;
}
.tupian > img {
  width: 90%;
  height: 90%;
}
.inout {
  width: 100%;
  height: 26px;
  margin-top: 3px;
  background: #444444;
}
.yts > div:nth-child(1) {
  float: left;
  height: 26px;
}
.yts > div:nth-child(1) > svg {
  float: left;
  margin-top: 4px;
  margin-right: 5px;
  background: #888888;
  margin-left: 5px;
}
.yts {
  width: 65.6%;
  height: 26px;
  border: none;
  float: left;
  margin: 0px 54.4px;
  background: #888888;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.inp {
  width: 79%;
  padding: 0px 8px;
  border: none;
  float: left;
  height: 26px;
  outline: medium;
  background: #888888;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
</style>
